import React, { useState } from "react";
import { Input, Select, DatePicker,Slider } from "apusic-ui";
import {AdvancedSearch,FormItemType} from "./index";
import CommonLayout from "../../components/CommonLayout";

const Example = () => {
    const handleSearch = (value:object) => {
        console.log(value);
    };

    const onValuesChange = (value:object) => {
        console.log(value)
    };

     let formItems = [
        {
            formItemProps:{
                name:"clusterName" ,
                label:"集群名称",
            } ,
            type:FormItemType.INPUT,
            placeholder:'请输入集群名称'
        },
         {
             formItemProps:{
                 name:"deploy" ,
                 label:"部署模式",
                 // tooltip:'这是系统的部署模式'
             } ,
             type:FormItemType.SELECT,
             placeholder:'请选择部署模式',
             selectOption: [{
                 label:'单机',
                 value:'aaa'
             },
                 {
                     label:'集群',
                     value:'aaa2'
                 },
                 {
                     label:'主从',
                     value:'aaa1'
                 }]
         },
         {
             formItemProps:{
                 name:"time" ,
                 label:"时间范围"
             } ,
             type:FormItemType.DATEPICKER,
         },
         {
            formItemProps:{
                name:"fileName" ,
                label:"文件名称",

            } ,
             placeholder:'请输入文件名称',
            type:FormItemType.INPUT,
        },
    ]

    return (
        <CommonLayout>
            <div style={{background:'#fff',padding:'20px 0 4px 0',margin:'20px 20px 0 20px'}}>
            <AdvancedSearch
                items={formItems}
                onChange={handleSearch}
                labelCol={{flex:'60px'}}
                onValuesChange={onValuesChange}
                collapsible
            />
            </div>
            <div style={{background:'#fff',padding:'20px 0 4px 0',margin:'20px'}}>
                <AdvancedSearch
                    items={formItems}
                    onChange={handleSearch}
                    labelCol={{flex:'60px'}}
                    onValuesChange={onValuesChange}
                />
            </div>
        </CommonLayout>
    );
};

export default Example;